<template>
    <div style="padding: 20px;" class="listt">
      <div v-for="v in [...list]" @click="geshou(v.id)">
        <img :src="v.img" alt="">
        <div>{{ v.name }}</div>
      </div>
    </div>
</template>

<script>
import api from "@/api/index"
    export default {
        data() {
            return {
               list:[]
            }
        },
        mounted () {
            this.getList();
        },
        methods: {
            geshou(id){
                this.$router.push("/geshou?id="+id)
            },
            getList(){
                api.getGeshou({size:99,page:1}).then(res=>{
                    this.list=res.data.list
                    console.log(res);
                })
            }
        },
    }
</script>

<style lang="scss" scoped>
.listt{
    display: flex;
    flex-wrap: wrap;
    width: 1240px;
    >div{
        width: 200px;
        margin-right: 40px;
        margin-bottom: 40px;
        div{
            margin-top: 10px;
            font-weight: bold;
        }
    }
    img{
        width: 200px;
        height: 200px;
    }
}
</style>